<template>
    <div>
        <van-form validate-first @failed="onFailed">

            <!-- 通过 validator 进行异步函数校验 -->
            <van-row id="apps">
                <van-col span="21" ><van-field
                        label="测试S"
                        v-model="value2"
                        name="validator"
                        placeholder="函数校验"
                        class="apps" id="apps"

                /></van-col>
                <van-col span="2" align="right">
                    <van-button   type="default" icon="arrow-down" @click="show=true"></van-button>
                </van-col>
            </van-row>



            <van-field name="radio" label="单选框">
                <template #input>
                    <van-radio-group v-model="radio" direction="horizontal">
                        <van-radio name="1">单选框 1</van-radio>
                        <van-radio name="2">单选框 2</van-radio>
                    </van-radio-group>
                </template>
            </van-field>
            <van-field
                    readonly
                    clickable
                    name="picker"
                    :value="value"
                    label="选择器"
                    placeholder="点击选择城市"
                    @click="showPicker = true"
            />
            <van-popup v-model="showPicker" position="bottom" :style="{height:'50%'}">
                <van-grid clickable  :column-num="5">
                    <van-grid-item v-for="(item, index) in icons" :key="index" :icon="item"  @click="onConfirm(item)" />
                </van-grid>
            </van-popup>
           <!-- <van-action-sheet
                    v-model="show"
                    :actions="actions"
                    description="这是一段描述信息"
                    :get-container="getContainer"
            />-->
            <van-popup v-model="show" lazy-render get-container="#apps"   >1212312</van-popup>
            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit">
                    提交
                </van-button>
            </div>
        </van-form>
    </div>
</template>

<script>
    import { Toast } from 'vant';
    export default {
        name: "ButtonMenus",
        data(){
            return {
                show:false,
                actions: [
                    { name: '选项' },
                    { name: '选项' },
                    { name: '选项', subname: '描述信息' },
                ],
                value1:'',
                value2:'',
                value3:'',
                pattern: /\d{6}/,
                radio:[1],
                value:'',
                columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
                showPicker:false,
                option2: [
                   'a','b','c'
                ],
                icons:[
                    'location-o',
                    'like-o',
                    'star-o',
                    'phone-o',
                    'setting-o',
                    'fire-o',
                    'coupon-o',
                    'cart-o',
                    'shopping-cart-o',
                    'cart-circle-o',
                    'friends-o',
                    'comment-o',
                    'gem-o',
                    'gift-o',
                    'point-gift-o',
                    'send-gift-o',
                    'service-o',
                    'bag-o',
                    'todo-list-o',
                    'balance-list-o',
                    'close',
                    'clock-o',
                    'question-o',
                    'passed',
                    'add-o',
                    'gold-coin-o',
                    'info-o',
                    'play-circle-o',
                    'pause-circle-o',
                    'stop-circle-o',
                    'warning-o',
                    'phone-circle-o',
                    'music-o',
                    'smile-o',
                    'thumb-circle-o',
                    'comment-circle-o',
                    'browsing-history-o',
                    'underway-o',
                    'more-o',
                    'video-o',
                    'shop-o',
                    'shop-collect-o',
                    'chat-o',
                    'smile-comment-o',
                    'vip-card-o',
                    'award-o',
                    'diamond-o',
                    'volume-o',
                    'cluster-o',
                    'wap-home-o',
                    'photo-o',
                    'gift-card-o',
                    'expand-o',
                    'medal-o',
                    'good-job-o',
                    'manager-o',
                    'label-o',
                    'bookmark-o',
                    'bill-o',
                    'hot-o',
                    'hot-sale-o',
                    'new-o',
                    'new-arrival-o',
                    'goods-collect-o',
                    'eye-o',
                    'balance-o',
                    'refund-o',
                    'birthday-cake-o',
                    'user-o',
                    'orders-o',
                    'tv-o',
                    'envelop-o',
                    'flag-o',
                    'flower-o',
                    'filter-o',
                    'bar-chart-o',
                    'chart-trending-o',
                    'brush-o',
                    'bullhorn-o',
                    'hotel-o',
                    'cashier-o',
                    'newspaper-o',
                    'warn-o',
                    'notes-o',
                    'calender-o',
                    'bulb-o',
                    'user-circle-o',
                    'desktop-o',
                    'apps-o',
                    'home-o',
                    'search',
                    'points',
                    'edit',
                    'delete',
                    'qr',
                    'qr-invalid',
                    'closed-eye',
                    'down',
                    'scan',
                    'free-postage',
                    'certificate',
                    'logistics',
                    'contact',
                    'cash-back-record',
                    'after-sale',
                    'exchange',
                    'upgrade',
                    'ellipsis',
                    'circle',
                    'description',
                    'records',
                    'sign',
                    'completed',
                    'failure',
                    'ecard-pay',
                    'peer-pay',
                    'balance-pay',
                    'credit-pay',
                    'debit-pay',
                    'cash-on-deliver',
                    'other-pay',
                    'tosend',
                    'pending-payment',
                    'paid',
                    'aim',
                    'discount',
                    'idcard',
                    'replay',
                    'shrink',
                ]
            }
        },
        methods:{
            validator(val) {
                return /1\d{10}/.test(val);
            },
            // 异步校验函数返回 Promise
            asyncValidator(val) {
                return new Promise((resolve) => {
                    Toast.loading('验证中...');

                    setTimeout(() => {
                        Toast.clear();
                        resolve(/\d{6}/.test(val));
                    }, 1000);
                });
            },
            onFailed(errorInfo) {
                console.log('failed', errorInfo);
            },
            onConfirm(value){
                this.value = value;
                this.showPicker=false
            },

        }

    }
</script>

<style scoped>

</style>